<template>
	<view class="pay-container">
		<view class="price-container">
			<view class="title-container">
				<view class="price">¥299.00</view>
				<view class="reminder">
					请尽快完成支付，放弃支付订单将被取消
				</view>
			</view>
			<view class="payment-methods">
				<view class="method">
					<view class="method-left">
						<image class="method-icon" src="/static/u5056.png"></image>
						<text class="method-name">支付宝支付</text>
					</view>
					<radio class="method-radio" name="pay" value="alipay" color="#DD816D">
					</radio>
				</view>

				<view class="method">
					<view class="method-left">
						<image class="method-icon" src="/static/u5060.png"></image>
						<text class="method-name">微信支付</text>
					</view>
					<radio class="method-radio" name="pay" value="weChat" color="#DD816D">
					</radio>
				</view>
			</view>

			<navigator url="/result/pages/payResult/payResult">
				<up-button type="primary" class="pay-button">立即支付</up-button>
			</navigator>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	
	const selectedPayMethod = ref('');
</script>

<style lang="scss" scoped>
	.pay-container {
		background-color: #F9FAFC;
		min-height: 100vh;
		padding: 0 32rpx;
		box-sizing: border-box;

		.price-container {
			background: #fff;
			border-radius: 16rpx;
			padding: 40rpx;
			margin-top: 40rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

			.title-container {
				text-align: center;
			}

			.price {
				font-size: 48rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.reminder {
				font-size: 28rpx;
				color: #999;
				margin-bottom: 60rpx;
			}

			.payment-methods {
				margin-bottom: 80rpx;

				.method {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 30rpx 0;
					border-bottom: 1rpx solid #f5f5f5;

					.method-left {
						display: flex;
						align-items: center;
					}

					.method-icon {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}

					.method-name {
						font-size: 32rpx;
						color: #333;
					}
				}
			}

			.pay-button {

				color: #fff;
				border-radius: 50rpx;
				font-size: 32rpx;
				height: 90rpx;
				line-height: 90rpx;
				width: 100%;
			}
		}
	}
</style>